<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>私信聊天</title>
		<link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
		<script src="/static/js/jquery-3.2.1.min.js"></script>
        <style>
   
            .msg{
                width: 800px;
            }
        </style>
        <script>
            function sendPrivateLetter(userId, receiveId, message) {
                $.ajax({
                    url: '/send-private-letter/',
                    method: 'POST',
                    data: {
                        'userid': userId,
                        'receiveid': receiveId,
                        'message': message,
                        'csrfmiddlewaretoken': '{{ csrf_token }}'  
                    },
                    success: function(response) {
                        alert(response.message);
                    },
                    error: function() {
                        alert('发送失败');
                    }
                });
            }
        
            function getPrivateLetters(userId) {
                $.ajax({
                    url: '/get-private-letters/',
                    method: 'GET',
                    data: { 'user_id': userId },
                    success: function(response) {
                        if (response.status === 'success') {
                            console.log(response.data); // 处理私信数据
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function() {
                        alert('获取私信失败');
                    }
                });
            }
        </script>
	</head>
	<body class="chat">
		<!-- 好友列表 -->
		<div class="list">
			<span class="title">最近联系</span>
			<div class="user-list">
				<!-- 没有联系人的提示内容 -->
				<!-- <a class="no-data"><img src="./images/404.svg"/>暂无联系人</a> -->
				
				<!-- 联系人列表 -->
				<a class="data active"><img src="/static/images/user.jpg" /><em>~飘雪</em></a>
				<a class="data"><img src="/static/images/book.png" /><em>孤独的狼</em><b class="dot"></b></a>
				<a class="data"><img src="/static/images/avi.svg" /><em>小羊</em><b class="dot"></b></a>
				<a class="data"><img src="/static/images/user.jpg" /><em>请跟我走</em></a>
				<a class="data"><img src="/static/images/user.jpg" /><em>我的网名有点长</em></a>
				
			</div>
		</div>
		<!-- 聊天窗口 -->
		<div class="content">
			<!-- 没有选择联系人的情况下，默认显示的效果 -->
			<!-- <a class="no-data"><img src="./images/404.svg"/>选择联系人</a> -->
			
			<div class="header clearfix">
				<span>与<b>~飘雪</b>的对话</span>
				<a class="btn">加入黑名单</a>
			</div>
			<!-- 显示聊天内容 -->
			<section class="msg">
				<!-- 聊天内容， 没有聊天内容的时候，提示  开始聊天 -->
				<!-- <a class="no-data">无聊天内容，开始聊天</a> -->
				
				<div class="f">
					<div class="info">
						<img src="/static/images/user.jpg" />
						<time>2022-08-13 18:43:22</time>
					</div>
					<div class="text">您的这本书可以免费发我一份吗？您的这本书可以免费发我一份吗？您的这本书可以免费发我一份吗？</div>
				</div>
				
				<div class="clearfix">
					<div class="t">
						<div class="info">
							<img src="/static/images/chat.gif" />
							<time>2022-08-13 19:46:19</time>
						</div>
						<div class="text">可以，你可以加我的QQ,备注:需要电子书哟</div>
					</div>
				</div>
				
				<div class="clearfix">
					<div class="t">
						<div class="info">
							<img src="/static/images/chat.gif" />
							<time>2022-08-13 19:46:19</time>
						</div>
						<div class="text">472759903</div>
					</div>
				</div>
				
				<div class="f">
					<div class="info">
						<img src="/static/images/user.jpg" />
						<time>2022-08-13 18:48:48</time>
					</div>
					<div class="text">已加QQ,万分谢谢</div>
				</div>
				
			</section>
			<!-- 显示 发送按钮 -->
			<footer>
				<textarea placeholder="请输入聊天信息"></textarea>
				<a class="btn">发送消息</a>
			</footer>
		</div>
		
	</body>
</html>
